I’ve come across a few sites that will tie window scrolling with animation. When used in a subtle, small fashion, this is kind of cool. When used to change large portions of the view or really screw with scrolling, I detect it. Like most things, it all comes down to how you use it I suppose. But I was thinking recently – how can we do this with Edge Animate?
Change edgePreload.js
In a file calles something_edgePreload.js you find a line similar to the follow:
if (AdobeEdge.bootstrapLoading) {
signaledLoading = true;
AdobeEdge.loadResources = doLoadResources;
AdobeEdge.playWhenReady = playWhenReady;
}
Replace playWhenReady with false.
Change edgeActions.js
First of all you have to insert a function to decide if an element is in the visible part of the screen.
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom)
&& (elemTop >= docViewTop));
}
This function returns True if an element is in a visible portion of the screen.
Now we have to change the main function to check it and then play the animation. Here the complete code of an edgeAction.js.
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol;
// aliases for commonly used Edge classes
//Edge symbol: 'stage'
(function(symbolName) {
var showAnimation = true;
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom)
&& (elemTop >= docViewTop));
}
Symbol.bindSymbolAction(compId, symbolName,
"creationComplete", function(sym, e) {
var animSize = sym.getDuration();
if(!isScrolledIntoView('.EDGE-1931783')) {
setTimeout(function() { sym.stop(); }, 0);
}
window.onscroll = function(e) {
if(isScrolledIntoView('.EDGE-1931783')) {
if (showAnimation) {
sym.play(0);
showAnimation = false;
}
}
}
});
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-1931783");
EDGE-1931783 is the class of my animation. Replace it with yours.
Happy coding!